TABLE Property Page

You can customize the appearance of a table in your Web page. To display the <TABLE> Property Page, open the Document Outline window and select the appropriate <TABLE> node, then choose Property Pages from the View menu.

Background color

Provides a list of table background colors. If you select blue, for example, the following is added to the opening <TABLE> tag:bgColor=blue. You can also click the adjacent browse (...) button to display the Color Picker and choose additional colors.

Background image

Specifies a graphics file (.gif, .jpg, or .jpeg) that appears tiled behind the table if the targetSchema is HTML 4.0. The image is displayed at its default size. If the table is smaller than the image, part of the image is cropped. If the table is larger than the image, the image tiles to fill the table background. Enter a path, or click the adjacent ellipse (...) button to open the Select Table Background Image dialog box and navigate to the location of the image. If, for example, you select an image named "background.jpg" that is in the Images folder, the following code is added to the opening <TABLE> tag:

background="//Images/background.jpg"

Dimensions

Height

Indicates the total height of the table in pixels. If you enter a height value, a height value is added to the opening <TABLE> tag. For example, if you set the height value to 20 and accept the remaining default values, the opening <TABLE> tag would be:

<TABLE height=20 cellSpacing=1 cellPadding=1 width=300 border=1>

If you leave this field blank, the table's height will be based on its content.

Width

Indicates the total width of the table. Select units (pixels or percent) from the list next to this box. If you select pixels, you can set an absolute width for the table. The table and its columns will always be the same width, regardless of screen resolution. The default width for a new table is 300 pixels. If you select percent, the width of the table changes to accommodate screen resolution. A table whose width value is 25 percent, for example, is always one-quarter the width of the available screen. If you leave this field blank, the table's width will be based on its content.

Layout

Alignment

Specifies how the table is aligned with respect to the document. Table layout alignment attributes take precedence over more general alignment attributes. For example, if a table which is assigned the left alignment attribute is inserted within a <CENTER> tag, the table is aligned to the left margin rather than centered.

Option Alignment
Center Align equidistant from the left and right margins.
Left Align with the left margin.
Right Align with the right margin.

Cell padding

Specifies the amount of space in pixels between cell contents and the cell border. The default value, which is 1, adds cellPadding=1 to the opening <TABLE> tag.

Cell spacing

Specifies the amount of space in pixels between cells. The default value, which is 1, adds cellSpacing=1 to the opening <TABLE> tag.

Borders

Size

Specifies the size in pixels of the table border. Choose 0 to specify no border. The default value, which is 1, adds border=1 to the opening <TABLE> tag.

Color

Specifies the same color for the borders of all cells in the table. The cell border color takes precedence over the table border color. Select a color or click the adjacent ellipse (...) button to display the Color Picker and choose additional colors. If the table has no border, border color is ignored.

Note   To enable border color, highlight, and shadow, you must set the targetSchema property to HTML 4.0.

Highlight

Specifies the color for the bottom and right sides of the table cell. Select a color name from the list or click the adjacent browse (...) button to display the Color Picker and choose additional colors. For example, if you select lime, the following code is added to the opening <TABLE> tag:

borderColorLight=lime

If the table has no border, highlight color is ignored.

Shadow

Specifies a color for the table's shadow. Select a color name from the list or click the adjacent ellipse (...) button to display the Color Picker and choose additional colors. For example, if you select aqua, the following is added to the opening <TABLE> tag: borderColorDark=aqua. If the table has no border, shadow color is ignored.